<template>
  <!-- 当 el-row 插入到其他标签里时，盒子宽度是通过内容而撑开，所有需要单独设置 el-row 的宽度 -->
  <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%;">
    <el-col>
      <!-- 部门名字 -->
      <span>{{ nodeData.name }}</span>
      <!-- 可以打印出来看看： -->
      <!-- {{ data }} -->
    </el-col>

    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ nodeData.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <el-dropdown>
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- 插槽： -->
              <slot>
                <!-- <el-dropdown-item>添加子部门</el-dropdown-item>
                <el-dropdown-item>编辑部门</el-dropdown-item>
                <el-dropdown-item>删除部门</el-dropdown-item> -->
              </slot>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

  <!--<el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%;">
    <el-col>
      <!~~ 部门名字 ~~>
      <span>{{ nodeData.name }}</span>
      <!~~ 可以打印出来看看： ~~>
      <!~~ {{ data }} ~~>
    </el-col>

    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!~~ 两个内容 ~~>
        <el-col>{{ nodeData.manager }}</el-col>
        <el-col>
          <!~~ 下拉菜单 element ~~>
          <el-dropdown>
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="isCompony">编辑部门</el-dropdown-item>
              <el-dropdown-item v-if="isCompony">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>-->
</template>

<script>
export default {
  name: 'TreeTools',

  props: {
    nodeData: {
      type: Object,
      require: true,
      default: () => {
        return {} // 默认数据为一个空对象
      }
    },
    // isCompony 如果是公司那一栏，则隐藏掉 编辑部门 和 删除部门
    isCompony: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {

    }
  },
  created() {
  },

  mounted() {

  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>

</style>
